<script setup lang="ts">
import { computed } from "vue";

const props = withDefaults(defineProps<{ title?: string; width?: number; height?: number; borderShadow?: boolean; dark?: boolean }>(), {
  title: "",
  width: 330,
  height: 200,
  borderShadow: false,
  dark: false
});

const title_height = computed(() => (props.title ? "38px" : "0px"));
</script>

<template>
  <div class="model-box">
    <p class="title">{{ title }}</p>
    <div class="model-box-content"><slot /></div>
  </div>
</template>

<style lang="scss" scoped>
.model-box {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  width: 100%;
  height: 100%;
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;

  .title {
    position: relative;
    margin-left: 10px;

    &::before {
      position: absolute;
      top: 50%;
      left: -10px;
      display: block;
      width: 3px;
      height: 16px;
      content: "";
      background: #3b82f6;
      border-radius: 0 100px 100px 0;
      transform: translateY(-50%);
    }
  }

  .model-box-content {
    width: 100%;
    height: calc(100% - v-bind(title_height));
  }
}
</style>
